<template>
    <view class="userhead psr" :style="{width:`${props.width}rpx`,height:`${props.height}rpx`}">

            <!-- elevation="5px" -->
        <view class="bg" :style="{width:`${props.width||140}rpx`,height:`${props.height||140}rpx`}">

            <image
                class="img"
                :style="{width:`${imgWidth}rpx`,height:`${imgHeight}rpx`,borderRadius:'1000px'}"
                :prview="props.prview"
                mode="aspectFill"
                :src="props.src || '/static/head.jpg'"
            ></image>
        </view>

        <image
            v-if="props.isVip === 2"
            class="vipimg"
            :style="{width:`${vipWidth}rpx`,height:`${vipHeight}rpx`,left:`${vipLeft}rpx`,bottom:`${vipBottom}rpx`}"
            src="/static/svip.png"
        ></image>
        <image
            v-if="props.isVip === 1"
            class="vipimg"
            :style="{width:`${vipWidth}rpx`,height:`${vipHeight}rpx`,left:`${vipLeft}rpx`,bottom:`${vipBottom}rpx`}"
            src="/static/vip.png"
        ></image>
    </view>
</template>

<script setup lang="ts">
import { onMounted, reactive, watchEffect, toRefs,computed } from "vue";
//import cacheimg from "@/components/cacheimg.vue";
const props = defineProps({
    width: {
        type: Number||String,
        default:140
    },
    height: {
        type: Number||String,
        default:140
    },
    src: {
        type: String,
        default:'',
    },
    isVip:{
        type: Number,
        default:0,
    },
    saveKey:{
        type: String,
        default:'',
    },
    prview:{
        type: Boolean,
        default:false,
    },

});


const imgHeight = computed(()=>{
    if(props.height){
        return props.height - (props.height * 0.1);
    }

    return 140-14;
})

const imgWidth = computed(()=>{
    if(props.width){
        return props.width - (props.width * 0.1);
    }
    return 140-14;
})

const vipHeight = computed(()=>{
    if(props.width){
        return props.width*0.7/2.25;
    }

    return 140*0.7/2.25;
})

const vipWidth = computed(()=>{
    if(props.width){
        return props.width*0.7;
    }

    return 140*0.7;
})



const vipLeft = computed(()=>{
    if(props.width){
        return props.width*0.15;
    }
    return 140*0.15;
})

const vipBottom = computed(()=>{
    if(props.height){
        return -(props.height*0.05);
    }
    return -(140*0.05);
})

</script>
<style lang="scss" scoped>
.userhead {
    position: relative;
    display:flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    .bg{
        flex:1;
        display:flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        background:#fff;


        /* #ifdef APP-IOS */
        box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.1);
        /* #endif */
        border-radius: 1000px;
        overflow:hidden;


    }

    .img {

        /* #ifndef APP-PLUS-NVUE */
        display: block;
        width: 100%;
        border-radius: 50%;
        height: 100%;
		/* #endif */
        /* #ifdef APP-PLUS-NVUE */
        flex:1;
        border-radius: 1000px;
        /* #endif */
    }

    .vipimg {
        position:absolute;
        /* #ifndef APP-PLUS-NVUE */
        width: 70%;
        z-index:10;
        bottom: -5%;
        overflow: hidden;
        /* #endif */
    }
}
</style>

